<template>
  <div class="prescriptionDetails">
    <el-form :model="formInline" class="demo-form-inline" label-position="right">
      <el-form-item label="原支付金额：" class="itemCol">

      </el-form-item>

      <el-form-item label="合计：">
        <el-text>无差价</el-text>
      </el-form-item>

      <el-form-item label="备注：">
        <el-input type="textarea" show-word-limit></el-input>
      </el-form-item>

      <el-form-item label="上传退款凭证：" class="itemCol">
        <el-image src="https://images.dayiketang.com/FglXBKALvg3iAiY-tTyhx-yexMXx"></el-image>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
  import {
    ref,
    nextTick,
    onMounted,
    reactive
  } from 'vue'
  const tableData = ref([])
  const radio1 = ref(1)
  const value = ref('')
  const value2 = ref([])
  const orderList = ref([{
    status: "待操作",
    user: "韩泽",
    time: "2022-10-19 15:12:29"
  }, {
    status: "待支付",
    user: "韩泽",
    time: "2022-10-19 15:12:29"
  }, {
    status: "待支付",
    user: "韩泽",
    time: "2022-10-19 15:12:29"
  }, {
    status: "待支付",
    user: "韩泽",
    time: "2022-10-19 15:12:29"
  }, {
    status: "待支付",
    user: "韩泽",
    time: "2022-10-19 15:12:29"
  }, {
    status: "待支付",
    user: "韩泽",
    time: "2022-10-19 15:12:29"
  }, {
    status: "待支付",
    user: "韩泽",
    time: "2022-10-19 15:12:29"
  }, {
    status: "待支付",
    user: "韩泽",
    time: "2022-10-19 15:12:29"
  }, {
    status: "待支付",
    user: "韩泽",
    time: "2022-10-19 15:12:29"
  }, {
    status: "待支付",
    user: "韩泽",
    time: "2022-10-19 15:12:29"
  }, {
    status: "待支付",
    user: "韩泽",
    time: "2022-10-19 15:12:29"
  }])
  const options = [{
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
    },
    {
      value: 'Option3',
      label: 'Option3',
    },
    {
      value: 'Option4',
      label: 'Option4',
    },
    {
      value: 'Option5',
      label: 'Option5',
    },
  ]

  //可搜索的多选框
  const isDistinguishingDiseases = ref(true)
  const isSyndromeDifferentiation = ref(true)
  const list = ref([]);
  const options2 = ref([]);
  const loading = ref(false);

  const remoteMethod = (query) => {
    if (query) {
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
        options2.value = list.value.filter((item) => {
          return item.label.toLowerCase().includes(query.toLowerCase());
        });
      }, 200);
    } else {
      options2.value = [];
    }
  };

  const states = [
    'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida',
    'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine',
    'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada',
    'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma',
    'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah',
    'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  ];

  onMounted(() => {
    list.value = states.map((item) => {
      return {
        value: `value:${item}`,
        label: `label:${item}`
      };
    });
  });



  const modifyClick = (type) => {
    if (type == 'DistinguishingDiseases') {
      isDistinguishingDiseases.value = !isDistinguishingDiseases.value
    } else if (type == 'SyndromeDifferentiation') {
      isSyndromeDifferentiation.value = !isSyndromeDifferentiation.value
    }
  }
</script>

<style lang="scss" scoped>
  .row {
    display: flex;
    flex-direction: row;
  }

  ::v-deep .el-form-item__label,
  .label {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    width: 120px;
    vertical-align: middle;
    font-size: 14px;
    color: #515a6e;
  }

  .marginL20 {
    margin-left: 20px;
  }

  .orderList {
    display: flex;
    text-align: left;
    flex-wrap: wrap;
    background: #FAFAFA;
    border-radius: 4px;
    padding: 20px 10px;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .orderItem {
    max-width: 25%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;

  }

  .orderItem:nth-child(4n + 1) {
    margin-left: 0;
    /* 每行第一个项目不添加左边距 */
  }

  .content {
    width: 100%;
    border: 1px solid #64B4FF;
    border-radius: 4px;
    padding: 15px 30px;
    font-size: 12px;
    background: #EAF5FF;
    color: rgba(0, 0, 0, 0.65);
    position: relative;
    font-family: PingFangSC-Regular;
    min-height: 180px;
    margin: 0 20px 0 40px;
    min-height: 120px;

    .title {
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 16px;
    }

    .xh {
      position: absolute;
      width: 26px;
      height: 26px;
      left: 0;
      top: 0;
      color: #fff;
      font-size: 12px;
      background: #028FFF;
      line-height: 24px;
      text-align: center;
      border-radius: 0 0 70% 0;
    }
  }

  .orderItem:last-child .content {
    background: #fcf4f4;
    border: 1px solid #fa5757;

    .xh {
      background: #fa5757;
    }
  }

  .orderItem:last-child img {
    // display: none;
    visibility: hidden;
  }

  .icon {
    flex-shrink: 0;
    // margin-left: 10px;
    /* 不允许图片缩小，保持原始大小 */
  }

  .icon img {
    width: 20px;
    height: 20px;
    // margin: 0 10px;
  }

  /* 每行的最后一个订单项不显示图片 */
  .lastItem .icon {
    // display: none;
    visibility: hidden;
  }

  .medication ::v-deep .el-input {
    margin: 0 12px;
  }

  .unit {
    margin-right: 6px;
  }
</style>